<template>
  <div class="callback-page">
    <p>正在处理微信登录...</p>
    <p v-if="error" class="error-message">登录失败：{{ error }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const error = ref('');
const API_BASE_URL = 'http://localhost:3000'; // 与主应用保持一致的后端地址

onMounted(async () => {
  try {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');
    const errMsg = urlParams.get('err_msg'); // 修正微信错误参数名

    // 处理微信返回的错误信息
    if (errMsg && errMsg !== 'ok') {
      error.value = errMsg.includes('user deny') ? '用户取消授权' : errMsg;
      return;
    }

    // 处理授权码
    if (code) {
      try {
        // 调用后端接口，用 code 换取 token
        const res = await axios.post(`${API_BASE_URL}/wechat/login`, {
          code,
          // 可选：传递主应用的来源信息
          source: 'login_page'
        });

        if (res.data.code === 200) {
          // 保存 token 到 localStorage（而非 sessionStorage，支持跨窗口共享）
          localStorage.setItem('token', res.data.token);
          localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo));

          // 通知主窗口登录成功（兼容不同场景）
          if (window.opener) {
            window.opener.postMessage({ type: 'wechat_login_success' }, window.location.origin);
            window.opener.location.reload(); // 刷新主窗口
          } else {
            // 若没有 opener（如直接跳转），则直接跳转至首页
            window.location.href = '/';
          }

          // 关闭当前回调页
          setTimeout(() => window.close(), 500);
        } else {
          error.value = res.data.msg || '登录失败，请重试';
        }
      } catch (apiError: any) {
        console.error('后端接口调用失败', apiError);
        error.value = apiError.response?.data?.msg || '服务器错误，无法完成登录';
      }
    } else {
      error.value = '未获取到授权码，请重新尝试';
    }
  } catch (err) {
    console.error('回调处理出错', err);
    error.value = '处理登录请求时出错';
  }
});
</script>

<style scoped>
.callback-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 16px;
}

.error-message {
  color: #ff4d4f;
  margin-top: 16px;
}
</style>